<template>
  <div class="data-content">
	  <div class="head-content">
		  <div class="head-content_btn">
			  <el-button class="btnDefault " type="info"  @click="saveSplitParam">确认配置</el-button>
		  </div>
		  <div class="head-content_now">
			  <span>当前位置 :</span>
			  <span>分屏配置</span>
		  </div>
	  </div>
      <div class="table-content">
  		<div class="role-list-div">
  			<span class="first-span">系统角色：</span>
  			<div class="role-list">
				<el-select class="noBg border1" v-model="value" placeholder="请选择">
					<el-option
							v-for="item in roleOptions"
							:key="item.value"
							:label="item.label"
							:value="item.value"
					></el-option>
				</el-select>
  			</div>
  		</div>
  		<div class="param-list">
  			<div class="param-div" >
				<el-checkbox-group v-model="checkedScreenTypes" @change="handleCheckedScreenTypesChange">
					<el-checkbox v-for="screenType in screenTypes" :label="screenType" :key="screenType">{{screenType}}</el-checkbox>
				</el-checkbox-group>
  			</div>
  		</div>

      </div>
  </div>
</template>

<script>
const screenTypeOptions = ['地图展现', '大屏演示'];
export default {
	name: "fpsz",
	props: {
	msg: String
	},
	data() {
		return {
            screenTypes: screenTypeOptions,
            checkedScreenTypes:[],
            roleOptions: [{
                value: '选项1',
                label: '所有权限'
            }],
            value: ''
		};
	},
	methods:{
	    //
        handleCheckedScreenTypesChange(value) {

        },
		//确认配置
		saveSplitParam(){
            this.$confirm('确认配置?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$message({
                    type: 'success',
                    message: '编辑成功!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消修改'
                });
            });

		}
	}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less">
	.data-content{
		width: 100%;
		height: 100%;
		overflow: auto;
		/*padding: 17px 0 0 0;*/
		position: relative;
		color: #ffffff;
		font-size: 14px;
		box-sizing: border-box;
		.head-content {
			display: flex;
			height: 7%;
			line-height: 2;
			justify-content: space-between;
			padding: 0 20px;
			color: #fff;
			box-sizing: border-box;
			.head-content_btn {
				width: 80%;
				margin-top: 10px;
			}
			.head-content_now {
				// width: 20%;
				margin-top: 20px;
			}
		}
		.table-content{
			overflow: auto;
			position: absolute;
			top: 35px;
			bottom: 0;
			left: 0;
			right: 0;
			padding: 40px;
			border: 1px solid #00f0ff;
			border-top: 4px solid #00f0ff;
			margin: 20px;
		  .role-list-div{
			  span.first-span{
				  float: left;
				  height: 35px;
				  line-height: 35px;
			  }
			  .role-list{
			  }
		  }
		  .param-list{
			  margin-top: 30px;
			  .param-div{
				  .el-checkbox-group{
					  .el-checkbox{
						  color: #ffffff;
							  .is-checked{
								  .el-checkbox__inner{
									  background-color: #00f0ff;
									  border-color: #00f0ff;
									  color: #00f0ff;
								  }
							  }
					  }
					  .is-checked{
						  .el-checkbox__label{
							  color: #00f0ff;
						  }
					  }
				  }
         }
     }
 }
 }





</style>
